<template>
  <div v-if="hasRole" class="role-guard">
    <slot />
  </div>
  <div v-else-if="showPlaceholder" class="role-placeholder">
    <slot name="placeholder">
      <el-empty description="无角色权限" />
    </slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

interface Props {
  /**
   * 需要的角色
   */
  role: string | string[]
  
  /**
   * 是否显示占位符
   */
  showPlaceholder?: boolean
  
  /**
   * 检查模式：any（满足任意一个角色）或 all（满足所有角色）
   */
  mode?: 'any' | 'all'
}

const props = withDefaults(defineProps<Props>(), {
  showPlaceholder: true,
  mode: 'any'
})

const authStore = useAuthStore()

const hasRole = computed(() => {
  if (!props.role) return true
  
  if (typeof props.role === 'string') {
    return authStore.hasRole(props.role)
  }
  
  if (props.mode === 'any') {
    return authStore.hasAnyRole(props.role)
  } else {
    // 检查是否拥有所有角色
    const roles = Array.isArray(props.role) ? props.role : [props.role]
    return roles.every(role => authStore.hasRole(role))
  }
})
</script>

<style scoped>
.role-guard {
  /* 组件样式 */
}

.role-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
</style>
